<template>
  <div class="mod-config">
    <basic-container>
      <div>
        <el-row>
          <div
            style="
              height: 30px;
              margin-bottom: 30px;
              display: flex;
              justify-content: space-between;
            "
          >
            <div>考核任务</div>
            <div class="flex" style="justify-content: flex-end">
              <el-button
                type="primary"
                plain
                v-if="subtype != 'rwck'"
                @click="close(1)"
                >保存</el-button
              >
              <el-button type="primary" plain @click="close(2)">返回</el-button>
            </div>
          </div>
          <div
            class="bj"
            style="border-top: 1px solid #b0bde2; padding-top: 30px"
          >
            <table
              style="width: 100%; text-align: center; border-color: #eff0f4"
              border="1"
            >
              <thead>
                <tr style="background: #b0bce2">
                  <th rowspan="2">被考核人</th>
                  <th rowspan="2">任务名称</th>
                  <th rowspan="2">工作目标/成效</th>
                  <th
                    v-if="zdfqForm.enter == 1"
                    rowspan="2"
                    style="width: 75px"
                  >
                    查看自评
                  </th>
                  <th v-else rowspan="2" style="width: 75px">完成情况</th>
                  <th colspan="4">完成情况评价</th>
                  <th rowspan="2" style="width: 75px">是否带入<br />下一期</th>
                  <th rowspan="2" style="width: 75px">下一期任务<br />结束时间</th>
                  <th
                    v-if="zdfqForm.enter == 2 || zdfqForm.enter == 4"
                    rowspan="3"
                  >
                    其他奖惩
                  </th>
                </tr>
                <tr style="background: #b0bce2">
                  <th style="width: 170px">
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="Top Left 提示文字"
                      placement="top-start"
                      v-model="prompt1"
                      popper-class="zpmsg"
                    >
                      <div slot="content">
                        A+：提前完成<br />
                        A：按时完成<br />
                        B：调整计划后按时完成<br />
                        C：轻微延误<br />
                        D：严重延误<br />
                      </div>
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                    工作效率（20%）
                  </th>
                  <th style="width: 170px">
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="Top Left 提示文字"
                      placement="top-start"
                      v-model="prompt2"
                      popper-class="zpmsg"
                    >
                      <div slot="content">
                        A+:工作质量出色，各项细节处理到位，无任何差错<br />
                        A：整体准确无差错<br />
                        B：有差错，未造成影响<br />
                        C：有差错，造成轻微影响<br />
                        D：有差错，造成较大影响<br />
                      </div>
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                    工作质量（20%）
                  </th>
                  <th style="width: 170px">
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="Top Left 提示文字"
                      placement="top-start"
                      v-model="prompt3"
                      popper-class="zpmsg"
                    >
                      <div slot="content">
                        A+：整体满意，获得了上级组织或公司公开表扬、表彰<br />
                        A：整体满意，公司内部、外部无公开不满或投诉<br />
                        B：基本满意，有极少的公开不满或投诉<br />
                        C：有部分公开不满或投诉<br />
                        D：有较多公开不满或投诉<br />
                      </div>
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                    满意度（30%）
                  </th>
                  <th style="width: 170px">
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="Top Left 提示文字"
                      placement="top-start"
                      v-model="prompt4"
                      popper-class="zpmsg"
                    >
                      <div slot="content">
                        A+：超出预期<br />
                        A：达到预期<br />
                        B：基本达到预期<br />
                        C：未能达到预期<br />
                        D：严重低于预期<br />
                      </div>
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                    工作效果（30%）
                  </th>
                </tr>
              </thead>
              <tbody v-for="(item, index) in dataForm.dataList">
                <tr>
                  <td >{{ item.ryName }}</td>
                  <td >{{ item.renwuName }}</td>
                  <td>{{ item.workTarget }}</td>
                  <td @click="showBtn(item)">查看</td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt1 = true"
                      @mouseleave="prompt1 = false"
                    >
                      <el-radio-group
                        v-model="item.pjEfficiency"
                        style="
                          word-break: break-all;
                          padding: 10px;
                        "
                      >
                        <el-radio :disabled="zdfqForm.disabled" :label="120"
                          >A+</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="110"
                          >A</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="100"
                          >B</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="90"
                          >C</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="80"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt2 = true"
                      @mouseleave="prompt2 = false"
                    >
                      <el-radio-group
                        v-model="item.pjQuality"
                        style="
                          word-break: break-all;
                          padding: 10px;
                        "
                      >
                        <el-radio :disabled="zdfqForm.disabled" :label="120"
                          >A+</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="110"
                          >A</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="100"
                          >B</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="90"
                          >C</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="80"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt3 = true"
                      @mouseleave="prompt3 = false"
                    >
                      <el-radio-group
                        v-model="item.pjSatisfied"
                        style="
                          word-break: break-all;
                          padding: 10px;
                        "
                      >
                        <el-radio :disabled="zdfqForm.disabled" :label="120"
                          >A+</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="110"
                          >A</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="100"
                          >B</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="90"
                          >C</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="80"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <div
                      class="radio-box"
                      @mouseover="prompt4 = true"
                      @mouseleave="prompt4 = false"
                    >
                      <el-radio-group
                        v-model="item.pjEffect"
                        style="
                          word-break: break-all;
                          padding: 10px;
                        "
                      >
                        <el-radio :disabled="zdfqForm.disabled" :label="120"
                          >A+</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="110"
                          >A</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="100"
                          >B</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="90"
                          >C</el-radio
                        >
                        <el-radio :disabled="zdfqForm.disabled" :label="80"
                          >D</el-radio
                        >
                      </el-radio-group>
                    </div>
                  </td>
                  <td>
                    <el-switch
                      v-model="item.nextRw"
                      active-text="是"
                      inactive-text="否"
                      :active-value="1"
                      :inactive-value="0"
                      :disabled="zdfqForm.disabled"
                      @change="changeNext(item)"
                    >
                    </el-switch>
                  </td>
                  <td>
                    <div class="blockss">
                      <el-date-picker
                        style="width: 110px"
                        :disabled="item.nextRw == 0 || zdfqForm.disabled"
                        v-model="item.nextDate"
                        type="date"
                        placeholder="选择日期"
                        :clearable="false"
                      >
                      </el-date-picker>
                    </div>
                  </td>
                  <td v-if="zdfqForm.enter == 2 || zdfqForm.enter == 4">
                    <el-input-number
                      placeholder=""
                      v-model="item.orderNum"
                    ></el-input-number>
                  </td>
                </tr>
              </tbody>
              <tr>
                <td :colspan="zdfqForm.enter == 1 ? 10 : 11">
                  <div style="padding: 20px">
                    注1：单项指标默认评价为A，考核人可依据被考核人任务完成情况，对单项指标评价进行手动调整（评价为A+、B、C、D），未调整部分按A计算。注2：评价为A+的任务，需参考以下条件：1.工作效率方面：①任务有明确的时间节点要求，必须追赶进度；②通过提前完成相关工作，直接给公司运营或业绩指标完成带来较大影响。2.工作质量方面：①单项任务完成质量远远好于其他分管部门；②任务完成获得了相关奖项、引领行业标准或成为内部标杆。3.满意度方面：获得集团公司纸质的表彰、公司领导在公司级别大会上的表扬、表彰等；对于非公开的口头鼓励、认可，不作为A+评价的依据。4.工作效果方面：获得了预期之外的成绩。对于超计划120%以上的任务，可评价为A+；对于未按照预期完成任务，评价为B。
                  </div>
                </td>
              </tr>
            </table>
            <el-dialog title="自评" :visible.sync="dialogVisible" width="50%">
              <div class="popver-table-box">
                <table v-if="JSON.stringify(checkObj) != '{}'">
                  <thead>
                    <tr>
                      <th>工作效率</th>
                      <th>工作质量</th>
                      <th>满意度</th>
                      <th>工作效果</th>
                      <th>附件</th>
                    </tr>
                  </thead>
                  <tbody v-if="checkObj.gridData.length > 0">
                    <tr>
                      <td>
                        {{ scoreText[checkObj.gridData[0].zpEfficiency] }}
                      </td>
                      <td>
                        {{ scoreText[checkObj.gridData[0].zpQuality] }}
                      </td>
                      <td>
                        {{ scoreText[checkObj.gridData[0].zpSatisfied] }}
                      </td>
                      <td>
                        {{ scoreText[checkObj.gridData[0].zpEffect] }}
                      </td>
                      <td>
                        <span v-if="checkObj.gridData[0].filename == null"
                          >无</span
                        >
                        <span
                          v-else
                          rowspan="2"
                          @click="
                            downloadBtn(
                              checkObj.gridData[0].scoreId,
                              checkObj.gridData[0].filename
                            )
                          "
                          >{{ checkObj.gridData[0].filename }}</span
                        >
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span
                          v-if="checkObj.gridData[0].zpEfficiencyRemark == null"
                          >无</span
                        ><span v-else>{{
                          checkObj.gridData[0].zpEfficiencyRemark
                        }}</span>
                      </td>
                      <td>
                        <span
                          v-if="checkObj.gridData[0].zpQualityRemark == null"
                          >无</span
                        ><span v-else>{{
                          checkObj.gridData[0].zpQualityRemark
                        }}</span>
                      </td>
                      <td>
                        <span
                          v-if="checkObj.gridData[0].zpSatisfiedRemark == null"
                          >无</span
                        ><span v-else>{{
                          checkObj.gridData[0].zpSatisfiedRemark
                        }}</span>
                      </td>
                      <td>
                        <span v-if="checkObj.gridData[0].zpEffectRemark == null"
                          >无</span
                        ><span v-else>{{
                          checkObj.gridData[0].zpEffectRemark
                        }}</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
              </span>
            </el-dialog>
          </div>
        </el-row>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {
  saveScorePj,
  downloadFile,
} from "@/api/hetongrenwu/zhongdian/renwutianbao";
export default {
  name: "zhongdianfq-form",
  props: {
    zdfqForm: {},
  },
  data() {
    return {
      btnstate: "6",
      radio: "1",
      dataForm: {
        dataList: [],
      },
      scoreText: {
        120: "A+",
        110: "A",
        100: "B",
        90: "C",
        80: "D",
        0: "无",
      },
      subtype: "",
      prompt1: false,
      prompt2: false,
      prompt3: false,
      prompt4: false,
      dialogVisible: false,
      checkObj: {},
    };
  },
  methods: {
    changeNext(item) {
      if (item.nextRw == 0) {
        item.nextDate = null;
      } else {
        item.nextDate = new Date();
      }
    },
    showBtn(item) {
      console.log(item);
      this.checkObj = {};
      this.dialogVisible = true;
      this.checkObj = item;
    },
    close(type) {
      if (type == 1) {
        console.log(this.dataForm.dataList)
        this.dataForm.dataList.forEach(item=>{
          console.log(item)
          if(item.nextRw == 1 && item.nextDate == null){
            this.$message.warning("请选择带入下一期的日期")
            return
          }
        })
        //提交后返回上一个页面
        saveScorePj(this.dataForm.dataList).then((res) => {

          this.$message.success("保存成功");
          this.$emit("zdrwfqC", "关闭");
        });
      } else if (type == 2) {
        //直接返回上一个页面
        this.$emit("zdrwfqC", "关闭");
      }
    },
    init(data, type) {
      this.subtype = type;
      console.log(data);
      this.btnstate = data[0].renwuStatus;
      this.dataForm.dataList = data;
      this.checkObj = {};
    },
    downloadBtn(id, name) {
      name = name.substr(0, name.lastIndexOf("."));
      downloadFile({ id: id }).then((response) => {
        this.$message.closeAll();
        this.$message.success("下载成功!");
        let url = window.URL.createObjectURL(new Blob([response.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", name + ".pdf");
        document.body.appendChild(link);
        link.click();
      });
    },
  },
};
</script>

<style>
.blockss .el-input__prefix{
  display: none;
}
.blockss .el-input__inner{
  padding: 10px;
}
.popver-table-box table {
  width: 100%;
}
.popver-table-box table tr th,
.popver-table-box table tr td {
  border: solid 1px #ccc;
  padding: 5px 2px;
  text-align: center;
}
.popver-table-box table thead tr {
  background: #b0bde2;
  color: #000;
}
.bj {
  overflow-x: scroll;
}
.ziping-table-box .el-radio {
  margin-right: 2px !important;
}
.radio-box .el-radio {
  margin-right: 10px !important;
}
.zpmsg {
  padding: 5px !important;
  line-height: 15px;
}
</style>
